<template>
    <div class="user-credit-report-jd">
        <ul class="steps">
            <li class="steps__item active">
                <span>1</span>
                <p>个人信息</p>
            </li>
            <li class="steps__item active">
                <span>2</span>
                <p>芝麻信用</p>
            </li>
            <li class="steps__item active">
                <span>3</span>
                <p>运营商</p>
            </li>
            <li class="steps__item active">
                <span>4</span>
                <p>京东</p>
            </li>
        </ul>
        <div class="form-wrap">
            <div class="big-title">填写京东信息</div>
            <ul class="form-box">
                <li class="form__item disabled">
                    <span class="form__key">账号</span>
                    <div class="form__value">
                        <span class="item"> {{username | mobile}} </span>
                    </div>
                </li>
                <li class="form__item">
                    <span class="form__key">密码</span>
                    <div class="form__value">
                        <input v-model='password' placeholder="请输入密码" type="password">
                    </div>
                </li>
            </ul>
            <!-- <ul class="form-box">
                <li class="form__item">
                    <div class="form__value text-left">
                        <input v-model='smsCode' type="tel" placeholder="请输入验证码">
                    </div>
                    <verification-code v-model='sent' @click='getCode'></verification-code>
                </li>
            </ul> -->
            <div class="form__agreement">
                <check-box v-model='agreementCheck'><span class='form__agreement-text'>已阅读并同意 <em @click.stop='showAgreement = true'>《服务协议》</em> </span></check-box>
            </div>
        </div>

        <span class="button long confirm" @click="submitJd" :class='{disabled : !agreementCheck}'>确定</span>
        <p class='next-step' @click='goReportDetail'>先去借钱，下回再来完善</p>
        <contact></contact>

        <!-- ModalSms begin -->
        <confirm 
            :show='show_codeSmsModal'
            @close='closeCodeSms'
            @confirm='confirmCode'
            class='auth-code'
            title='输入短信验证码'>
            <ul class='form-box'>
                <li class='form__item'>
                    <span class="form__key">验证码</span>
                    <div class="form__value">
                        <input type="text" placeholder="请输入您收到的验证码" v-model='code'>
                    </div>
                </li>
            </ul>
        </confirm>
        <!-- ModalSms end -->

        <!-- ModalImg begin -->
        <confirm 
            :show='show_codeImgModal'
            @close='closeCodeImg'
            @confirm='confirmCode'
            title='输入图片验证码'
            class='auth-code'>
            <ul class='form-box'>
                <li class='form__item'>
                    <span class="form__key"><img width="100" height='46' :src="codeImgBase64" alt=""></span>
                    <div class="form__value">
                        <input type="text" placeholder="请输入左侧的验证码" v-model='code'>
                    </div>
                </li>
            </ul>
        </confirm>
        <!-- ModalImg end -->

        <!-- 授权中 begin -->
        
        <loading-down
            class='searching-loading'
            title='正在授权，请稍候'
            :show='pollinLoading'></loading-down>
        <!-- 查询中 end -->

        <agreement
            type='other'
            :show='showAgreement'
            @close='showAgreement=false'></agreement>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import modal from '../components/Modal.vue'
    import contact from '../components/Contact.vue'
    import confirm from '../components/Confirm.vue'
    import verificationCode from '../components/VerificationCode.vue'
    import loadingDown from '../components/LoadingDown.vue'
    import idNumber from '../filters/filter-idNumber'
    import mobile from '../filters/filter-mobile'
    import checkBox from '../components/CheckBox.vue'
    import agreement from '../components/Agreement.vue'
    import  { mapGetters, mapActions }  from 'vuex'
    import { userCreditReportJdValidation } from '../validation/validation'
    import { reportApi, userApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            modal,
            confirm,
            contact,
            verificationCode,
            checkBox,
            agreement,
            loadingDown
        },
        filters:{
            idNumber,
            mobile
        },
        data() {
            return {
                creditReportNo:this.$route.params.no,
                placeholder:'--',
                username:'',
                password:'',
                smsCode:'',
                sent:false,
                showAgreement:false,
                agreementCheck:true,
                taskId:'',
                codeImgBase64:'',
                // modal
                show_codeSmsModal:false,
                show_codeImgModal:false,
                // loading
                searching:false,
                loading:false,
                confirmCodeing:false,
                pollinLoading: false,
                pollinLoaded:false,
                // form-modal
                code:'',
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo',
            ]),
            userInfo(){
                return this.localInfo.userInfo
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setGoHome'
            ]),

            // function
            confirmCode(){
                this.showLoading()
                reportApi.jdInput({
                    taskId:this.taskId,
                    value:this.code,
                })
                .then(result => {
                    this.hideLoading()
                    this.show_codeSmsModal = false
                    this.show_codeImgModal = false
                    this.pollinTaskStatus()
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            closeCodeSms(){
                this.searching = false
                this.show_codeSmsModal = false
            },
            closeCodeImg(){
                this.searching = false
                this.show_codeImgModal = false
            },
            submitJd(){
                let params = {
                    smsCode:this.smsCode,
                    creditReportNo:this.creditReportNo,
                    username:this.username,
                    password:this.password,
                }
                if(!userCreditReportJdValidation(params)) return

                this.showLoading()
                reportApi.submitJd(params)
                .then(result=>{
                    this.taskId = result.taskId
                    this.hideLoading()
                    this.pollinTaskStatus()
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            goReportDetail(){
                this.$router.push({
                    name:'user-credit-report-detail',
                    params:{
                        no:this.creditReportNo
                    }
                })
            },
            pollinTaskStatus(){
                this.pollinLoading = true
                this.pollinLoaded = false
                reportApi.jdStatus({
                    taskId:this.taskId,
                    creditReportNo:this.creditReportNo
                })
                .then(result => {
                    if(result.type == 'sms'){
                        this.pollinLoading = false
                        this.show_codeSmsModal = true
                        return
                    }
                    if(result.type == 'img'){
                        this.pollinLoading = false
                        this.show_codeImgModal = true
                        this.codeImgBase64 = result.info
                        return
                    }
                    if(result.type == 'result'){
                        this.pollinLoading = false
                        this.pollinLoaded = true
                        this.$router.push({
                            name:'user-credit-report-detail',
                            params:{
                                no:this.creditReportNo
                            }
                        })
                        return
                    }
                    else{
                        this.pollinLoading = false
                    }
                })
                .catch(error => {
                    console.error(error)
                    this.pollinLoading = false
                    this.pollinLoaded = false
                })
            },
            getCode(){
                this.showLoading()

                userApi.sendSms({
                    mobile:this.username,
                    // mobile:13625817215,
                    type:'CREDIT_REPORT'
                })
                .then(result=>{
                    this.sent = true
                    this.hideLoading()
                })
                .catch(error => {
                    console.error(error)
                    this.sent = false
                    this.hideLoading()
                })
            },
        },
        created(){
            this.setGoHome(true)
            this.username = this.userInfo.user.mobile
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .user-credit-report-jd{
        .form__agreement{
            padding-top: 0;
            padding-bottom: 0;
        }
        .form-box{
            margin-top: 0;
            margin-bottom: 16px;
            &:last-child{
                margin-bottom: 8px;
            }
        }
        .auth-code{
            .form__key{
                padding: 0;
                padding-right: 15px;
            }
            .form__value{
                border-bottom:1px solid $sectionColor;
                input{
                    text-align: left;
                    padding: 10px 0;
                }
            }
        }
    }

</style>
